<layout name="layout"/>
<link rel="stylesheet" type="text/css" href="/public/common/layui/css/layui.css" >
<link rel="stylesheet" type="text/css" href="/public/common/bootstrap/css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="/public/common/global.css">

<style>
.content li{
  display: none;
}
.on{
  display: block !important;
}
.list-group-item{
  border: none;
}

</style>
<section id="autuor">
  <div class="row">
    <div class="col-md-4">
      <ul class="tab list-group">
        <li class="tab_on list-group-item">
          <button type="button" class="btn btn-info btn-lg btn-block">高级权限</button>
        </li>
        <li class="list-group-item">
          <button type="button" class="btn btn-info btn-lg btn-block">中级权限</button>

        </li>
        <li class="list-group-item">
          <button type="button" class="btn btn-info btn-lg btn-block">低级权限</button>
        </li>
      </ul>
    </div>
    <div class="col-md-8" >
    <ul class="content ">
      <li class="on">
        <form class="layui-form" action="">
          <table class="layui-table" lay-skin="line">
            <colgroup>
            </colgroup>
            <thead>
              <tr>
                <th>用户名</th>
                <th>创建时间</th>
                <th>项目</th>
                <th>修改权限</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>高级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>贤心</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
            </tbody>
          </table>
          <button type="submit" class="layui-btn">保存</button>
        </form>
      </li>
      <li>
        <form class="layui-form" action="">
          <table class="layui-table" lay-skin="line">
            <colgroup>
            </colgroup>
            <thead>
              <tr>
                <th>用户名</th>
                <th>创建时间</th>
                <th>项目</th>
                <th>修改权限</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>中级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>贤心</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
            </tbody>
          </table>
          <button type="submit" class="layui-btn">保存</button>
        </form>
      </li>
      <li>
        <form class="layui-form" action="">
          <table class="layui-table" lay-skin="line">
            <colgroup>
            </colgroup>
            <thead>
              <tr>
                <th>用户名</th>
                <th>创建时间</th>
                <th>项目</th>
                <th>修改权限</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>低级权限</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td>贤心</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                  <select name="city" lay-verify="">
                      <option value="">请选择一个权限</option>
                      <option value="010">高级权限</option>
                      <option value="021">中级权限</option>
                      <option value="0571">低级权限</option>
                    </select>
                </td>
              </tr>
            </tbody>
          </table>
          <div id="demo6"></div>
          <button type="submit" class="layui-btn">保存</button>

        </form>
      </li>
    </ul>
  </div>
    </div>
</section>
<script type="text/javascript" src="/public/common/layui/layui.js"></script>
<script type="text/javascript" src="/public/admin/js/jquery.min.js"></script>

<script>
  $(".tab li").click(function(){
    $(".content li").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');
  })
  layui.use(['form','laypage','layer'],function(){
    var form = layui.form();
    var laypage = layui.laypage,layer = layui.layer;
    laypage({
      cont: 'demo6'
      ,pages: 5
      ,groups: 0
      ,first: false
      ,last: false
      ,jump: function(obj, first){
        if(!first){
          layer.msg('第 '+ obj.curr +' 页');
        }
      }
    });
 });
</script>
